<template>
  <div>
    <el-dialog
      :visible.sync="dialog.search"
      :close-on-click-modal="false"
      title="高级搜索"
      width="80%"
      append-to-body
    >
      <el-form ref="searchForm" :model="searchForm" label-width="120px">
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="店铺标题" prop="shopTitle" label-for="shopTitle">
              <el-input
                v-model="searchForm.shopTitle"
                element-id="shopTitle"
                placeholder="请输入店铺标题"
                clearable
                @keyup.enter.native="searchOkDialog"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="店铺是否可用" prop="shopIsActive">
              <el-select
                v-model="searchForm.shopIsActive"
                placeholder="请选择店铺是否可用"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.shopIsActiveSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="模板标题" prop="title" label-for="title">
              <el-input
                v-model="searchForm.title"
                element-id="title"
                placeholder="请输入模板标题"
                clearable
                @keyup.enter.native="searchOkDialog"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="发货地" prop="expressPlace" label-for="expressPlace">
              <el-input
                v-model="searchForm.expressPlace"
                element-id="expressPlace"
                placeholder="请输入发货地"
                clearable
                @keyup.enter.native="searchOkDialog"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="是否包邮" prop="expressFree">
              <el-select
                v-model="searchForm.expressFree"
                placeholder="请选择是否包邮"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.expressFreeSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="计价方式" prop="valuationType">
              <el-select
                v-model="searchForm.valuationType"
                placeholder="请选择计价方式"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.valuationTypeSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="默认快递费" prop="defaultFee" label-for="defaultFee">
              <el-input
                v-model="searchForm.defaultFee"
                element-id="defaultFee"
                placeholder="请输入默认快递费"
                clearable
                @keyup.enter.native="searchOkDialog"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="默认规格" prop="defaultSpec">
              <el-input-number
                v-model="searchForm.defaultSpec"
                placeholder="请输入默认递增规格"
                clearable
                style="width: 100%;"
                @keyup.enter.native="searchOkDialog"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="默认递增规格">
              <el-row>
                <el-col :span="11">
                  <el-form-item prop="defaultIncrementSpecMin">
                    <el-input-number
                      v-model="searchForm.defaultIncrementSpecMin"
                      placeholder="请输入开始默认递增规格"
                      style="width: 100%;"
                      @keyup.enter.native="searchOkDialog"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="2" style="text-align: center">-</el-col>
                <el-col :span="11">
                  <el-form-item prop="defaultIncrementSpecMax">
                    <el-input-number
                      v-model="searchForm.defaultIncrementSpecMax"
                      placeholder="请输入结束默认递增规格"
                      style="width: 100%;"
                      @keyup.enter.native="searchOkDialog"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="默认递增快递费">
              <el-row>
                <el-col :span="11">
                  <el-form-item prop="defaultIncrementFeeMin">
                    <el-input-number
                      v-model="searchForm.defaultIncrementFeeMin"
                      placeholder="请输入开始默认递增快递费"
                      style="width: 100%;"
                      @keyup.enter.native="searchOkDialog"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="2" style="text-align: center">-</el-col>
                <el-col :span="11">
                  <el-form-item prop="defaultIncrementFeeMax">
                    <el-input-number
                      v-model="searchForm.defaultIncrementFeeMax"
                      placeholder="请输入结束默认递增快递费"
                      style="width: 100%;"
                      @keyup.enter.native="searchOkDialog"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="默认包邮条件">
              <el-row>
                <el-col :span="11">
                  <el-form-item prop="defaultFreeConditionMin">
                    <el-input-number
                      v-model="searchForm.defaultFreeConditionMin"
                      placeholder="请输入开始默认包邮条件"
                      style="width: 100%;"
                      @keyup.enter.native="searchOkDialog"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="2" style="text-align: center">-</el-col>
                <el-col :span="11">
                  <el-form-item prop="defaultFreeConditionMax">
                    <el-input-number
                      v-model="searchForm.defaultFreeConditionMax"
                      placeholder="请输入结束默认包邮条件"
                      style="width: 100%;"
                      @keyup.enter.native="searchOkDialog"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="默认包邮金额">
              <el-row>
                <el-col :span="11">
                  <el-form-item prop="defaultFreeMaxPaymentMin">
                    <el-input-number
                      v-model="searchForm.defaultFreeMaxPaymentMin"
                      placeholder="请输入开始默认包邮金额"
                      style="width: 100%;"
                      @keyup.enter.native="searchOkDialog"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="2" style="text-align: center">-</el-col>
                <el-col :span="11">
                  <el-form-item prop="defaultFreeMaxPaymentMax">
                    <el-input-number
                      v-model="searchForm.defaultFreeMaxPaymentMax"
                      placeholder="请输入结束默认包邮金额"
                      style="width: 100%;"
                      @keyup.enter.native="searchOkDialog"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="模板说明" prop="description" label-for="description">
              <el-input
                v-model="searchForm.description"
                element-id="description"
                placeholder="请输入模板说明"
                clearable
                @keyup.enter.native="searchOkDialog"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="是否默认模板" prop="isDefault">
              <el-select
                v-model="searchForm.isDefault"
                placeholder="请选择是否默认模板"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.isDefaultSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="版本号">
              <el-row>
                <el-col :span="11">
                  <el-form-item prop="versionMin">
                    <el-input-number
                      v-model="searchForm.versionMin"
                      placeholder="请输入开始版本号"
                      style="width: 100%;"
                      @keyup.enter.native="searchOkDialog"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="2" style="text-align: center">-</el-col>
                <el-col :span="11">
                  <el-form-item prop="versionMax">
                    <el-input-number
                      v-model="searchForm.versionMax"
                      placeholder="请输入结束版本号"
                      style="width: 100%;"
                      @keyup.enter.native="searchOkDialog"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="创建时间">
              <el-row>
                <el-col :span="11">
                  <el-form-item prop="createTimeMin">
                    <el-date-picker
                      type="datetime"
                      v-model="searchForm.createTimeMin"
                      placeholder="请输入开始创建时间"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      style="width: 100%;"
                      clearable
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="2" style="text-align: center">-</el-col>
                <el-col :span="11">
                  <el-form-item prop="createTimeMax">
                    <el-date-picker
                      type="datetime"
                      v-model="searchForm.createTimeMax"
                      placeholder="请输入结束创建时间"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      style="width: 100%;"
                      clearable
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="更新时间">
              <el-row>
                <el-col :span="11">
                  <el-form-item prop="updateTimeMin">
                    <el-date-picker
                      type="datetime"
                      v-model="searchForm.updateTimeMin"
                      placeholder="请输入开始更新时间"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      style="width: 100%;"
                      clearable
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="2" style="text-align: center">-</el-col>
                <el-col :span="11">
                  <el-form-item prop="updateTimeMax">
                    <el-date-picker
                      type="datetime"
                      v-model="searchForm.updateTimeMax"
                      placeholder="请输入结束更新时间"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      style="width: 100%;"
                      clearable
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="是否可用" prop="isActive">
              <el-select
                v-model="searchForm.isActive"
                placeholder="请选择是否可用"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.isActiveSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelDialog">取消</el-button>
        <el-button type="primary" @click="searchOkDialog" :loading="loading.search">搜索</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as utils from '@/utils/utils'
import * as ResponseStatus from '@/utils/response-status'
export default {
  name: 'ExpressTemplateSearch',
  data() {
    return {
      dialog: {
        search: false,
      },
      loading: {
        search: false,
      },
      searchForm: {
        pageNo: 1,
        pageSize: 10,
        sortColumn: undefined,
        sortOrder: undefined,
        id: undefined,
        idMin: undefined,
        idMax: undefined,
        shopId: undefined,
        shopIdMin: undefined,
        shopIdMax: undefined,
        shopTitle: undefined,
        shopIsActive: undefined,
        shopIsActiveMin: undefined,
        shopIsActiveMax: undefined,
        title: undefined,
        expressPlace: undefined,
        expressFree: undefined,
        expressFreeMin: undefined,
        expressFreeMax: undefined,
        valuationType: undefined,
        valuationTypeMin: undefined,
        valuationTypeMax: undefined,
        defaultFee: undefined,
        defaultFeeMin: undefined,
        defaultFeeMax: undefined,
        defaultSpec: undefined,
        defaultSpecMin: undefined,
        defaultSpecMax: undefined,
        defaultIncrementSpec: undefined,
        defaultIncrementSpecMin: undefined,
        defaultIncrementSpecMax: undefined,
        defaultIncrementFee: undefined,
        defaultIncrementFeeMin: undefined,
        defaultIncrementFeeMax: undefined,
        defaultFreeCondition: undefined,
        defaultFreeConditionMin: undefined,
        defaultFreeConditionMax: undefined,
        defaultFreeMaxPayment: undefined,
        defaultFreeMaxPaymentMin: undefined,
        defaultFreeMaxPaymentMax: undefined,
        description: undefined,
        isDefault: undefined,
        isDefaultMin: undefined,
        isDefaultMax: undefined,
        version: undefined,
        versionMin: undefined,
        versionMax: undefined,
        createTime: undefined,
        createTimeMin: undefined,
        createTimeMax: undefined,
        updateTime: undefined,
        updateTimeMin: undefined,
        updateTimeMax: undefined,
        isActive: undefined,
        isActiveMin: undefined,
        isActiveMax: undefined,
      },
      dataDictCodes: ['YES_NO', 'VALUATION_TYPE'],
      selects: {
        shopIsActiveSelect: [],
        expressFreeSelect: [],
        valuationTypeSelect: [],
        defaultSpecSelect: [],
        isDefaultSelect: [],
        isActiveSelect: [],
      },
    }
  },
  computed: {},
  mounted() {
    this.initDataDict()
  },
  methods: {
    initDataDict() {
      utils
        .getDataDict(this.dataDictCodes)
        .then((response) => {
          if (response) {
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'YES_NO',
              formProp: 'shopIsActive',
              dataProp: 'shopIsActiveSelect',
            })
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'YES_NO',
              formProp: 'expressFree',
              dataProp: 'expressFreeSelect',
            })
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'VALUATION_TYPE',
              formProp: 'valuationType',
              dataProp: 'valuationTypeSelect',
            })
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'YES_NO',
              formProp: 'isDefault',
              dataProp: 'isDefaultSelect',
            })
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'YES_NO',
              formProp: 'isActive',
              dataProp: 'isActiveSelect',
            })
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    resetForm(excludeProps) {
      for (let key in this.searchForm) {
        if (excludeProps && excludeProps.includes(key)) {
          continue
        }
        this.searchForm[key] = undefined
      }
    },
    cancelDialog() {
      this.dialog.search = false
    },
    searchOkDialog() {
      this.dialog.search = false
      this.$emit('searchTable', true)
    },
  },
}
</script>

<style>
</style>